<template>
    <div>
        <div ref="li" class="li"></div>
    </div>
</template>
<script>
const chart = require("echarts")
export default {
    data() {
        return {

        }
    },
    methods: {
        fun() {
            const charts = chart.init(this.$refs.li)
            const option = {
                legend: {
                    data: ["销量","销"],
                    left: 0,
                    color: ["red","red"]
                },
                tooltip: {
                    trigger: "axis",
                    axisPointer: {
                        type: "shadow"
                    }
                    // 鼠标放上你去显示的内容控制
                    },
                    xAxis: {
                    boundaryGap: false,
                    // 与y轴距离 为false
                    show: true,
                    data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子","一副"],
                    axisTick: {
                      show: false
                      // 刻度是否显示
                   },
                },
                yAxis: {
                   scale : true,
                   axisLine: {
                      show: true
                  // 刻度是否显示
                   }, 
                },
                series: [
                    {
                        lineStyle: {
                            // 设置曲线的粗细
                            width: 3
                        },
                        
                        name: '销量',
                        type: 'line',
                        stack: '总量',
                        symbol: "circle",
                        symbolSize: 15,
                        itemStyle: {
                            color: "blue",
                            borderColor: "red",
                            borderWidth: 5
                            // 设置点上去边框的样式
                        },
                        data: [10, 20, 36, 15, 10, 20, 50],
                        smooth: true,
                        showSymbol: false,
                        areaStyle: {},
                        emphasis: {
                            focus: 'series'
                        },
                    },
                {
                    name: '销',
                    type: 'line',
                    stack: '总量',
                    symbol: "circle",
                    symbolSize: 10,
                    smooth: true,
                    // 是否带有弧度
                     showSymbol: false,
                    //  曲线图上面的小点控制 是否显示
                    data: [5, 16, 34, 19, 30, 25,40],
                    color: "#7B68EE",
                    areaStyle: {
                        // 设置填充样式
                        color: new chart.graphic.LinearGradient(0, 0, 0, 1, [{
                    offset: 0,
                    color: 'rgba(128, 255, 165)'
                }, {
                    offset: 1,
                    color: 'red'
                }])
                    },
                    // 填充区域的样式
                    emphasis: {
                        focus: 'self'
                    },
                    // 曲线图下面的填
                }
               ]
            }
            charts.setOption(option)
        }
    },
    mounted() {
        this.fun()
    }
}
</script>
<style scoped>
    .li {
        height: 500px;
        width: 500px;
    }
</style>